@import "../global/global";

.ring-select {
  display: inline-block;
  position: relative;
  width: 100%;
  white-space: nowrap;
  text-align: left;
  color: $ring-text-color;

  &_input-mode {
    .ring-select__icons {
      line-height: normal;
      top: 4px;
    }
  }

  &_disabled {
    opacity: 0.5;
  }

  &__message {
    display: inline-block;
    margin: $ring-unit 0;
    padding: 0 2*$ring-unit;
    text-align: center;
  }

  &__toolbar {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }

  &__button {
    margin-top: $ring-unit/2;
    margin-bottom: $ring-unit;
    padding: 0 2*$ring-unit;
    text-align: left;
    line-height: 24px;

    &:hover {
      color: #FFF;
      background-color: $ring-blue-color;
      cursor: pointer;
    }

    &__plus {
      position: relative;
      margin-right: $ring-unit;
      font-size: 19px;
    }
  }

  &__icons {
    .ring-loader.ring-loader_inline {
      top: 2px;
      margin-right: 2px;
    }
  }

  &__label {
    @include ring-ellipsis;

    display: inline-block;
    width: 100%;
    vertical-align: top;
  }

  & &__icons {
    position: absolute;
    right: $ring-unit;
  }

  &:not(.ring-button) &__icons {
    top: 2px;
  }

  &__selected-icon {
    display: inline-block;
    width: $ring-unit*2;
    height: $ring-unit*2;
    margin: 0 $ring-unit;

    vertical-align: middle;

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  &__clear-icon {
    cursor: pointer;
  }

  &__clear-tags {
    .ring-list__glyph {
      color: $ring-text-color;
    }

    &:hover .ring-list__glyph {
      color: #fff;
    }
  }
}
